<template>
  <h2>本班各科平均成绩柱状统计图</h2>
  <div :id="main" style="width: 1250px; height: 613px"></div>
</template>

<script>
const axios = require("axios");
import * as echarts from "echarts";
export default {
  name: "teacher_banjitongji",
  data() {
    return {
      t_bianhao: "",
      main: "",
    };
  },
  methods: {
    chaxun() {
      let _this = this;
      if (this.t_bianhao == "") {
        this.$router.push({ path: "/" });
      } else {
        axios
          .get("https://localhost:44391/api/teacher/chaxunpingjunfen", {
            params: {
              bianhao: this.t_bianhao,
            },
          })
          .then(function (response) {
            console.log(response.data);
            // _this.zhuzhuang();
            // var source_arr = [
            //   {
            //     bs: "70",
            //     c: "59",
            //     element: "72.33",
            //     java: "79.5",
            //     javaScript: "53",
            //     linux: "79",
            //     mySql: "67",
            //     php: "84",
            //     vue: "75.33",
            //     web: "64.67",
            //     yingyu: "57",
            //   },
            // ];
            // 上面这个对象要转换成下面这样
            //[{name:"早上",value:5},{name:"中午",value:1608},{name:"晚上",value:357},{name:"中午和晚上",value:217}]
            var source_arr = response.data;
            console.log("原始数据是对象数组：" + source_arr);
            var obj = source_arr[0];
            console.log("获取第一个对象【它只有一个对象】：" + obj);
            var out_arr = []; //创建一个数组
            for (var key in obj) {
              var temp = {}; //创建临时对象
              temp.name = key; //存储对象的Key为name
              temp.value = obj[key]; //存储value
              out_arr.push(temp);
              // console.log(key,obj[key]);
            }
            console.log("提取name：" + out_arr[0].name);
            var res = JSON.stringify(out_arr); //转换json
            console.log("转换输出：" + res);
            let x = [];
            let y = [];
            out_arr.forEach((element) => {
              x.push(element.name);
              y.push(element.value);
            });
            console.log(x, y);
            debugger;
            _this.zhuzhuang(x, y);
          });
      }
    },
    zhuzhuang(x, y) {
      var chartDom = document.getElementById(this.main);
      let newpro = new Promise((res) => {
        res();
      });
      newpro.then(() => {
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          xAxis: {
            type: "category",
            data: x,
          },
          yAxis: {
            type: "value",
          },
          series: [
            // {
            //   data: y,
            //   type: "bar",
            //   showBackground: true,
            //   backgroundStyle: {
            //     color: "rgba(180, 180, 180, 0.2)",
            //   },
            // },
            {
              name: "Life Cost",
              type: "bar",
              stack: "Total",
              label: {
                show: true,
                position: "inside",
              },
              data: y,
            },
          ],
        };

        option && myChart.setOption(option);
      });
    },
  },
  mounted() {
    this.main = Date.now() + Math.random();
    console.log(this.main)
    this.t_bianhao = this.$store.state.t_bianhao;
    this.chaxun();
  },
};
</script>

<style scoped>
h2 {
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
}
</style>